<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css"
	media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"
	media="all">
<link rel="stylesheet" type="text/css" href="common/global.css"
	media="all">
<link rel="stylesheet" type="text/css" href="css/personal.css"
	media="all">
<style type="text/css">
.article-container {
	background-color: #ffffff;
	padding-top: 20px;
	width: 1024px;
	margin: 20px auto;
}

.article_r {
	padding-top: 10px;
	float: right;
}

.pulisher, .time, .article_view, .article_comments, .article_del {
	clear: both;
	margin-right: 25px;
	font-size: 15px;
}

.title {
	font-weight: bold;
	font-size: 30px;
	text-align: center;
}

.article_content {
	background: #ffffff;
	clear: both;
	padding: 1em 4em;
	margin-top: 40px;
}

p {
	text-indent: 2em;
	text-overflow: hidden;
	font-size: 18px;
}

/*话题内容图片*/
.ImgContent {
	width: 350px;
	margin: 0px auto;
	padding: 5px;
	overflow: hidden;
}

.NavLinks {
	padding: 5px;
	width: 100px;
	height: 100px;
	float: left;
	overflow: hidden;
}

.NavLinks img {
	width: 100%;
	height: 100%;
}

.hitShowPic {
	width: 350px;
	clear: both;
	margin-left: 430px;
}

.hitShowPic span {
	font-size: 15px;
	text-align: center;
}
/*以下评论的css*/
.show_reply_list {
	margin-right: 1em;
	color: grey;
}

.comment_list {
	background-color: #ffffff;
	padding-top: 5px;
	width: 900px;
	margin: 0 auto;
}

.comment {
	width: 900px;
	margin-top: 10px;
}

.comment_details {
	float: right;
}

.comment_content {
	clear: both;
	margin: 5px 50px;
	font-size: 16px;
}

.comment_add_or_last {
	margin: 0 auto;
	clear: both;
	width: 600px;
	height: 50px;
	background: #F0F0F0;
	text-align: center;
	font-size: 20px;
	line-height: 40px; //
	行高（与div保持同高，垂直居中写法） margin-bottom: 40px;
}

.imgdiv {
	width: 80px;
	height: 70px;
	float: left;
}

.imgcss {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.comment_name {
	margin-left: 10px;
	color: #3D9EEA;
	font-size: 16px;
	font-weight: bolder;
}

.layui-icon {
	font-size: 13px;
	color: grey;
}

.del {
	float: right;
}

.del_comment {
	margin-right: 50px;
}

.reply_list {
	clear: both;
	display: none;
	width: 900px;
	padding-right: 15px;
	margin-top: 10px;
	font-size: 16px;
}

.reply {
	clear: both;
	width: 700px;
	margin: 4px auto;
}

.reply_name {
	color: #3D9EEA;
}

.del_reply {
	float: right;
}

.show_remain_reply {
	width: 600px;
	height: 40px;
	text-align: center;
	font-size: 18px;
	background-color: #F0F0F0;
	margin: 0 auto;
	line-height: 40px;
	display: none;
}
</style>

</head>
<body>

	<div class="article-container">
		<form class="login100-form validate-form" action="/insertComment"
			method="post">
			<div>
				<textarea cols="80" rows="5" name="comment" id="comment"></textarea>
				<br> <input name="postId" id="postId" type="hidden"
					value="${postId }" />
				<%--         	<input name="username" id="username" value="${username}" type="hidden"/>  --%>
				<div class="btn btn-info pull-right" align="left">
					<button style="color: blue" type="submit">评论</button>
				</div>
			</div>
		</form>

		<%--         --%>
		<%--         	<input name="username" type="hidden" value=<%request.getSession("username")%>/> --%>

		<hr>
		<div class="comment_list">
			<h3 style="text-indent: 2em;">评论列表</h3>
			<hr>
			<div class="comment">
				<c:forEach items="${comlist}" var="u" varStatus="status">
					<div class="imgdiv">
						<img class="imgcss" src="./images/user.jpg" />
					</div>

					<div class="conmment_details">
						<div style="float: left;">
							<span class="comment_name">${u.nickname } </span>     <span>${ u.time}</span>

						</div>

						<div class="comment_content"> ${u.content}</div>
					</div>
				</c:forEach>
			</div>
			<hr>




			<!--回复列表结束-->



		</div>
</body>
<script type="text/javascript" src="common/layui/layui.js"></script>
<script type="text/javascript">
       layui.use(['form','layer','jquery','element','laypage','form'],function(){
        var form = layui.form();
        window.layer = layui.layer;
        layedit = layui.layedit;
        window.jQuery = window.$ = layui.jquery;
        var element = layui.element(),form = layui.form();    
        layer.photos({
                photos: '#layer-photos-demo'
        ,anim: 5
        }); 
 
        $(document).ready(function(){
                //alert($(".comment_list").find(".comment")[0] == undefined);
               if($(".comment_list").find(".comment")[0] == undefined) {
                  $(".comment_add_or_last").html("暂无人评论");
               }
               $(document).on('click','.show_reply_list', function(){ 
                           
                            if($(this).closest('.comment').find(".reply_list").css("display") != "none") {
                                 $(this).closest('.comment').find(".show_remain_reply").css("display","none");
                                 $(this).html("查看回复");
                                 
                            }else {
                               $(this).closest('.comment').find(".show_remain_reply").css("display","block");
                                   $(this).html("收起回复");
                                   
                            }
                            $(this).closest('.comment').find(".reply_list").toggle(500);
                      
                     
                });
 
              $(document).on('click','.show_remain_reply', function(){
                      $(this).html("已显示全部回复");
                      //TODO发送数据
 
              });
              $(document).on('click','.comment_add_or_last', function(){
                        var getMoreComment = $(this);
                        //TODO如果获取的数据为零
                        getMoreComment.html("没有更多评论了");
              });
 
        });
 
               
        
 
         
 
      });
 
  </script>


</body>
</html>
